import { AllFormProps } from './store/editor';
import { VNode, h } from 'vue';

/**
 * 属性组件（属性表单）
 */
export interface PropToForm {
  // 表单组件
  component: string;
  // 子组件
  subComponent?: string;
  // 表单lable
  text?: string;
  // 表单组件初始值value值
  value?: string;
  // 子组件内容
  options?: { text: string | VNode; value: any }[];
  // 表单组件的额外属性
  extraProps?: { [key: string]: any };
  // 初始值转换
  initalTransform?: (v: any) => any;
  // 组件事件转换后的值
  afterTransform?: (v: any) => any;
  // 组件值
  valueProp?: string;
  //组件事件名称
  eventName?: string;
}

/**
 * 将表单映射到属性(将表单组件对应组件属性映射到画布组件)
 */
export type PropsToForms = {
  [P in keyof AllFormProps]?: PropToForm;
};
const pxToNumberHandler: PropToForm = {
  component: 'a-input-number',
  initalTransform: (v: string) => (v ? parseInt(v) : 0),
  afterTransform: (e: number) => (e ? `${e}px` : '')
};
const fontFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiti"' },
  { text: '仿宋', value: '"FangSong","STFangsong"' }
];
const fontFamilyOptions = fontFamilyArr.map(font => {
  return {
    value: font.value,
    text: (<span style={{ fontFamily: font.value }}>{font.text}</span>) as VNode
  };
});

/**
 * 将属性映射到表单(将画布组件对应组件属性映射到表单组件)
 */
export const mapPropsToForms: PropsToForms = {
  // Text
  text: {
    text: 'text',
    component: 'a-textarea',
    // 组件事件转换后的值
    afterTransform: (e: any) => e.target.value
  },

  fontSize: {
    text: '字号',
    ...pxToNumberHandler
  },
  lineHeight: {
    text: '行高',
    component: 'a-slider',
    extraProps: { min: 0, max: 3, step: 0.1 },
    initalTransform: (v: string) => parseFloat(v),
    afterTransform: (e: number) => e.toString()
  },
  textAlign: {
    text: '对齐',
    component: 'a-radio-group',
    subComponent: 'a-radio-button',

    options: [
      { value: 'left', text: '左' },
      { value: 'center', text: '中' },
      { value: 'right', text: '右' }
    ],
    afterTransform: (e: any) => e.target.value
  },
  fontFamily: {
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '字体',
    options: [{ value: '', text: '无' }, ...fontFamilyOptions]
  }
};
